<template>
  <div class="app">
    <div class="box top">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="9" v-for="(item, index) in topitem" :key="index">
          <div class="item">
            <div class="left">
              <i :class="['iconfont', item.iconfont]"></i>
            </div>
            <div class="right">
              <p style="color: #ccc">{{ item.title }} &nbsp; &nbsp;</p>
              <p v-if="item.title == '服务总数'">
                <span style="font-size: 30px">{{ item.num }}</span> <span style="font-size: 15px"> 个</span>
              </p>
              <p v-else-if="item.title == '服务订阅总人次'">
                <span style="font-size: 30px">{{ item.num }}</span> <span style="font-size: 15px"> 人/次</span>
              </p>
              <p v-else-if="item.title == '今日访问总数'">
                <span style="font-size: 30px">{{ item.num }}</span> <span style="font-size: 15px"> 次</span>
              </p>
              <p v-else-if="item.title == '平均响应时间'">
                <span style="font-size: 30px">{{ item.num }}</span> <span style="font-size: 15px"> 毫秒</span>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="box top_1">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="9">
          <div class="item">
            <div style="width: 100%; font-size: 20px">
              <span style="padding: 10px">服务类型分布 </span>
            </div>
            <div id="bing1"></div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="item">
            <div style="width: 100%; font-size: 20px">
              <span style="padding: 10px">服务运行状态分布 </span>
            </div>
            <div id="bing2"></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="item" style="overflow: auto">
            <span style="display: inline-block; padding: 10px; font-size: 20px; padding: 10px; width: 100%">今日服务响应时间排行(ms)</span>
            <div style="width: 100%; height: 90%; overflow: auto; display: flex; flex-direction: column">
              <div style="display: flex; width: 100%; padding: 10px; border-bottom: 1px solid #ccc" v-for="(item, index) in arr" :key="index">
                <h6 :style="{ background: item.bgcolor, 'font-size': '20px', color: '#ffffff' }">{{ index + 1 }}</h6>
                <p style="flex: 1; padding: 0px 5px">{{ item.apiName }}</p>
                <span>{{ item.callerSize }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { countMarketApiLogsAvgResponseTime } from '@/api/index/index'
export default {
  props: ['propsValue'],
  data() {
    return {
      itemObj: {
        echarts1: null,
        echarts2: null,
      },
      arr: [],
      option: {},
      sumVal: '',
      list: [],
      list1: [],
      echartData: {},
      topitem: [
        {
          title: '服务总数',
          num: '473',
          iconfont: 'icon-rili',
        },
        {
          title: '服务订阅总人次',
          num: '711',
          iconfont: 'icon-a-leixingfuwudingyuezhuangtaion',
        },
        {
          title: '今日访问总数',
          num: '14973',
          iconfont: 'icon-jintian',
        },
        {
          title: '平均响应时间',
          num: '14973',
          iconfont: 'icon-jihuabaobiao',
        },
      ],
    }
  },
  watch: {
    propsValue: {
      handler: function (newval, oldval) {
        if (newval) {
          this.topitem[0].num = newval.count.apiCount * 1 + newval.count.unUseCount * 1 + 1
          this.topitem[1].num = newval.count.userCount
          this.topitem[2].num = newval.count.dayCount
          countMarketApiLogsAvgResponseTime().then((res) => {
            if (res.data.code == 200) {
              console.log(res.data)
              this.topitem[3].num = res.data.data.countMarketApiLogsAvgResponseTimeCatch.dayCountApiAvgResponseTime
              this.arr = res.data.data.countMarketApiLogsAvgResponseTimeCatch.marketApiLogsRankingList
              // 检查数组是否已定义并且不为空
              if (this.arr && this.arr.length > 0) {
                this.arr.sort((a, b) => {
                  return b.callerSize - a.callerSize
                })
                this.arr.map((v, i) => {
                  v.bgcolor = this.colorfilter(i + 1)
                })
              }
            }
          })

          this.echartData = newval.count
          this.sumVal = this.echartData.unUseCount + 1 + this.echartData.apiCount
          this.list = [
            { name: '第三方服务', value: this.echartData.unUseCount },
            { name: '空间服务', value: 1 },
            { name: 'API服务', value: this.echartData.apiCount },
          ]
          this.list1 = [
            { name: '正常', value: this.echartData.useCount * 1 + 1 },
            { name: '异常', value: this.echartData.unUseCount },
            { name: '未知', value: 0 },
            { name: '过期', value: 0 },
          ]
          this.echarts1()
          this.echarts2()
        }
      },
    },
  },

  methods: {
    colorfilter(value) {
      switch (value) {
        case 1: {
          return '#FF302C'
        }
        case 2: {
          return '#00BE92'
        }
        case 3: {
          return '#FF8A00'
        }
        default: {
          return '#158BCD'
        }
      }
    },
    echarts1() {
      this.itemObj.echarts1 = this.$echarts.init(document.getElementById('bing1'))
      const legend = {
        //data，就是取得每个series里面的name属性。
        orient: 'vertical',
        icon: 'circle', //图例形状
        padding: 0,
        bottom: 'center',
        right: 40,
        itemWidth: 14, //小圆点宽度
        itemHeight: 14, // 小圆点高度
        itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        textStyle: {
          fontSize: 14,
          color: '#000000',
        },
      }
      const tooltip = {
        show: true,
        formatter: '{b}:{d}%',
      }
      const color = ['#f6cc9b', '#9e9b9c', '#03caa6']
      var option = {
        // backgroundColor,
        color,
        tooltip,
        legend,

        series: [
          {
            name: '',
            type: 'pie',
            center: ['50%', '50%'], //圆心的位置
            top: '2%', //单单指的饼图距离上面的距离，top越大饼图越小
            left: '0%', //单单指的饼图距离左面的距离，会改变饼图的大小
            radius: ['40%', '70%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
            avoidLabelOverlap: false, //做同心圆用到
            clockwise: true, //顺时针排列
            startAngle: 90, //起始角度 影响不大
            //roseType:"", // 实心圆 不能出现roseType这个属性

            label: {
              show: false, //false不显示饼图上的标签
              position: 'center', //inside（在饼图上显示）,outside(默认就会出现引导线) center
              formatter: '{b}:{c}个',
            },

            itemStyle: {
              //每个扇形的设置
              borderColor: 'rgba(0,0,0,.1)', //扇形边框颜色
              borderWidth: 1, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
            },
            data: this.list.sort((a, b) => b.value - a.value), //数组从大到小排序

            emphasis: {
              scale: true,
              scaleSize: 10,
              //同心圆单独加上的
              label: {
                show: true,
                fontSize: 24,
                fontWeight: 'bold',
              },
              //启用鼠标放上去放大效果，这个挺好的
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      this.itemObj.echarts1.setOption(option)
      window.addEventListener('resize', this.handleResize)
    },
    echarts2() {
      this.itemObj.echarts2 = this.$echarts.init(document.getElementById('bing2'))
      //做环形图的本质是 radius: ['内半径', '外半径'] 内半径!=0
      const backgroundColor = '#101736'

      const legend = {
        //data，就是取得每个series里面的name属性。
        orient: 'vertical',
        icon: 'circle', //图例形状
        padding: 0,
        bottom: 'center',
        right: 40,
        itemWidth: 14, //小圆点宽度
        itemHeight: 14, // 小圆点高度
        itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        textStyle: {
          fontSize: 14,
          color: '#000000',
        },
      }
      const tooltip = {
        show: true,
        formatter: '{b}:{d}%',
      }
      const color = ['#02caa7', '#f5ca9a', '#a79e96', '#ea4a7b']
      var option = {
        // backgroundColor,
        color,
        tooltip,
        legend,

        series: [
          {
            name: '',
            type: 'pie',
            center: ['50%', '50%'], //圆心的位置
            top: '2%', //单单指的饼图距离上面的距离，top越大饼图越小
            left: '0%', //单单指的饼图距离左面的距离，会改变饼图的大小
            radius: ['40%', '70%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
            avoidLabelOverlap: false, //做同心圆用到
            clockwise: true, //顺时针排列
            startAngle: 90, //起始角度 影响不大
            //roseType:"", // 实心圆 不能出现roseType这个属性

            label: {
              show: false, //false不显示饼图上的标签
              position: 'center', //inside（在饼图上显示）,outside(默认就会出现引导线) center
              formatter: '{b}:{c}',
            },

            itemStyle: {
              //每个扇形的设置
              borderColor: 'rgba(0,0,0,.1)', //扇形边框颜色
              borderWidth: 1, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
            },
            data: this.list1.sort((a, b) => b.value - a.value), //数组从大到小排序

            emphasis: {
              scale: true,
              scaleSize: 10,
              //同心圆单独加上的
              label: {
                show: true,
                fontSize: 24,
                fontWeight: 'bold',
              },
              //启用鼠标放上去放大效果，这个挺好的
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      this.itemObj.echarts2.setOption(option)
      window.addEventListener('resize', this.handleResize)
    },
    handleResize() {
      this.itemObj.echarts1.resize()
      this.itemObj.echarts2.resize()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
}
</script>
<style lang="scss" scoped>
.el-row {
  width: 100%;
}
.el-col-9 {
  width: 40% !important;
}
.box {
  border-radius: 5px;
}
.top {
  width: 100%;
  height: 10vh;
  padding: 1vw;
  margin-bottom: 2vh;
  background-color: white;

  border-radius: 21px;
  .item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .left {
      width: 3vw;
      height: 6vh;
      text-align: center;
      line-height: 6vh;
      border-radius: 15vh;
      margin-right: 10px;
      background-color: #edf4ff;
      .iconfont {
        font-size: 1.5vw;
        color: blue;
      }
    }
    .right {
      font-size: 1vw;
      padding-right: 2px;
      border-right: 1px solid #ccc;
      p {
        margin: 0;
      }
    }
  }
}
.top_1 {
  width: 100%;
  height: 50vh;
  .el-row {
    display: flex;
    justify-content: space-between;

    .item {
      width: 100%;
      height: 100%;
      background-color: white;
      border-radius: 21px;

      #bing1 {
        width: 100%;
        height: 90%;
      }

      #bing2 {
        width: 100%;
        height: 90%;
      }
      div {
        display: flex;
        align-items: center;
        h6 {
          width: 2vw;
          height: 40px;
          text-align: center;
          line-height: 40px;
          margin: 0px !important;
        }
      }
    }
  }
}
::v-deep(::-webkit-scrollbar) {
  display: block !important;
}
</style>
